<template>
	<view class="scrollList_container">
		<u-scroll-list>
			<view v-for="(item, index) in get_scrollList" :key="index" class="scrollList_container_item"
				@click="get_detailed(item)">
				<view class="scrollList_container_item_images">
					<image :src="item.cover" mode="aspectFill" style="width: 100%; height: 100%;"></image>
				</view>
				<text class="title">{{ item.name }}</text>
			</view>
		</u-scroll-list>
	</view>
</template>

<script>
	export default {
		name: "scrollList",
		data() {
			return {};
		},
		computed: {
			get_scrollList() {
				return this.$store.state.isTypeWallpaperList;
			}
		},
		methods: {
			get_detailed(item) {
				uni.$u.route({
					url: 'page_detailed/detailed/detailed',
					params: {
						id: item.id,
						name: item.name
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scrollList_container {
		width: 100%;
		padding: 50rpx 0;
		box-sizing: border-box;

		&_item {
			margin-left: 34rpx;

			&:nth-child(1) {
				margin-left: 0;
			}

			&_images {
				width: 300rpx;
				height: 150rpx;
				border-radius: 16rpx;
				overflow: hidden;
			}

			.title {
				width: 100%;
				display: block;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
		}
	}
</style>
